<template>
  <div class="home">
    <HelloWorld/>
    <div class="main">
      <h1>热门推荐</h1>
      <p class="main_gray"> Popular recommenda</p>
      <div class="main_title">
        <div><router-link to="/detail1">名胜古迹</router-link></div>
        <div><router-link to="/detail1">大好河山</router-link></div>
        <div><router-link to="/detail1">繁华都市</router-link></div>
        <div><router-link to="/detail1">激流勇进</router-link></div>
        <div><router-link to="/detail1">秀丽山川</router-link></div>
      </div>
      <div class="lunbo2">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div><router-link to="/detail1"><img src="../assets/8.jpg" alt=""> <p>江西省·上饶</p></router-link> </div>
              <div><router-link to="/detail1"><img src="../assets/8.jpg" alt=""> <p>江西省·上饶</p></router-link> </div>
              <div><router-link to="/detail1"><img src="../assets/8.jpg" alt=""> <p>江西省·上饶</p></router-link> </div>
              <div><router-link to="/detail1"><img src="../assets/8.jpg" alt=""> <p>江西省·上饶</p></router-link> </div>
              <div><router-link to="/detail1"><img src="../assets/8.jpg" alt=""> <p>江西省·上饶</p></router-link> </div>
            </div>
            <div class="swiper-slide">
              <div><router-link to="/detail1"><img src="../assets/8.jpg" alt=""> <p>江苏省·无锡</p></router-link> </div>
              <div><router-link to="/detail1"><img src="../assets/8.jpg" alt=""> <p>江苏省·无锡</p></router-link> </div>
              <div><router-link to="/detail1"><img src="../assets/8.jpg" alt=""> <p>江苏省·无锡</p></router-link> </div>
              <div><router-link to="/detail1"><img src="../assets/8.jpg" alt=""> <p>江苏省·无锡</p></router-link> </div>
              <div><router-link to="/detail1"><img src="../assets/8.jpg" alt=""> <p>江苏省·无锡</p></router-link> </div>
            </div>
            <div class="swiper-slide">
              <div><router-link to="/detail1"><img src="../assets/8.jpg" alt=""> <p>山东省·烟台</p></router-link> </div>
              <div><router-link to="/detail1"><img src="../assets/8.jpg" alt=""> <p>山东省·烟台</p></router-link> </div>
              <div><router-link to="/detail1"><img src="../assets/8.jpg" alt=""> <p>山东省·烟台</p></router-link> </div>
              <div><router-link to="/detail1"><img src="../assets/8.jpg" alt=""> <p>山东省·烟台</p></router-link> </div>
              <div><router-link to="/detail1"><img src="../assets/8.jpg" alt=""> <p>山东省·烟台</p></router-link> </div>
            </div>
            <div class="swiper-slide" >
              <div><router-link to="/detail1"><img src="../assets/8.jpg" alt=""> <p>云南省·丽江</p></router-link> </div>
              <div><router-link to="/detail1"><img src="../assets/8.jpg" alt=""> <p>云南省·丽江</p></router-link> </div>
              <div><router-link to="/detail1"><img src="../assets/8.jpg" alt=""> <p>云南省·丽江</p></router-link> </div>
              <div><router-link to="/detail1"><img src="../assets/8.jpg" alt=""> <p>云南省·丽江</p></router-link> </div>
              <div><router-link to="/detail1"><img src="../assets/8.jpg" alt=""> <p>云南省·丽江</p></router-link> </div>
            </div>
            <div class="swiper-slide" >
              <div><router-link to="/detail1"><img src="../assets/8.jpg" alt=""> <p>云南省·洱海</p></router-link> </div>
              <div><router-link to="/detail1"><img src="../assets/8.jpg" alt=""> <p>云南省·洱海</p></router-link> </div>
              <div><router-link to="/detail1"><img src="../assets/8.jpg" alt=""> <p>云南省·洱海</p></router-link> </div>
              <div><router-link to="/detail1"><img src="../assets/8.jpg" alt=""> <p>云南省·洱海</p></router-link> </div>
              <div><router-link to="/detail1"><img src="../assets/8.jpg" alt=""> <p>云南省·洱海</p></router-link> </div>
            </div>
           
          </div>
        </div>
      </div>
    <!-- 热门攻略 -->
    <div class="main2">
      <h1>热门推荐</h1>
      <p class="main_gray"> Popular recommenda</p>
      <!-- 烟台 -->
      <div class="main2_three">
        <div class="main2_three_left">
          <img src="../assets/3.jpg">
        </div>
        <div class="main2_three_right">
          <h1>烟台旅游攻略</h1>
          <div class="main2_three_right_p">
            <p>烟台，山东省辖地级市，国务院批复确定的中国山东半岛的中心城市、环渤海地区重要的港口城市和国家历史文化名城。 [1]  截至2020年6月，全市下辖5个区，代管6个县级市。总面积13864.5平方公里 [2]  。根据第七次人口普查数据，截至2020年11月1日零时，烟台市常住人口为7102116人， [106]  [113]  城镇人口466.97万人，城镇化率65.42%。 [3-4]  烟台地处中国华东地区、山东半岛东北部，位于东经119°34′—121°57′，北纬36°16′—38°23′之间，东连威海，西接潍坊、青岛，南邻黄海，北濒渤海，与辽东半岛对峙，与大连隔海相望，海岸线长909千米，濒临渤海、黄海，有岛屿63个 [5]  ，是环渤海经济圈、胶东经济圈内重要节点城市、中国首批14个沿海开放城市之一，中国海滨城市，“一带一路”国家战略重点建设港口城市。</p>
          </div>
          <div class="main2_three_right_bottom">
            <div class="main2_three_right_bottom_left"><p>旅游</p><p>旅游</p><p>旅游</p></div>
            <div class="main2_three_right_bottom_right"><img src="../assets/eye.png" alt=""><p>2256</p></div>
          </div>
        </div>
      </div>
      <!-- 烟台结束 -->
      <div class="main2_three">
        <div class="main2_three_left">
          <img src="../assets/3.jpg">
        </div>
        <div class="main2_three_right">
          <h1>莱芜旅游攻略</h1>
          <div class="main2_three_right_p">
            <p>烟台，山东省辖地级市，国务院批复确定的中国山东半岛的中心城市、环渤海地区重要的港口城市和国家历史文化名城。 [1]  截至2020年6月，全市下辖5个区，代管6个县级市。总面积13864.5平方公里 [2]  。根据第七次人口普查数据，截至2020年11月1日零时，烟台市常住人口为7102116人， [106]  [113]  城镇人口466.97万人，城镇化率65.42%。 [3-4]  烟台地处中国华东地区、山东半岛东北部，位于东经119°34′—121°57′，北纬36°16′—38°23′之间，东连威海，西接潍坊、青岛，南邻黄海，北濒渤海，与辽东半岛对峙，与大连隔海相望，海岸线长909千米，濒临渤海、黄海，有岛屿63个 [5]  ，是环渤海经济圈、胶东经济圈内重要节点城市、中国首批14个沿海开放城市之一，中国海滨城市，“一带一路”国家战略重点建设港口城市。</p>
          </div>
          <div class="main2_three_right_bottom">
            <div class="main2_three_right_bottom_left"><p>旅游</p><p>旅游</p><p>旅游</p></div>
            <div class="main2_three_right_bottom_right"><img src="../assets/eye.png" alt=""><p>2256</p></div>
          </div>
        </div>
      </div>
      <!-- 烟台结束 -->
      <div class="main2_three">
        <div class="main2_three_left">
          <img src="../assets/3.jpg">
        </div>
        <div class="main2_three_right">
          <h1>洱海旅游攻略</h1>
          <div class="main2_three_right_p">
            <p>山东省辖地级市，国务院批复确定的中国山东半岛的中心城市、环渤海地区重要的港口城市和国家历史文化名城。…纪念馆总建筑面积3600平方米，利用现代化的馆陈方式介绍杨子荣的英雄事迹，再现其参军前在家乡牟平的生活场…</p>
          </div>
          <div class="main2_three_right_bottom">
            <div class="main2_three_right_bottom_left"><p>旅游</p><p>旅游</p><p>旅游</p></div>
            <div class="main2_three_right_bottom_right"><img src="../assets/eye.png" alt=""><p>2256</p></div>
          </div>
        </div>
      </div>
      <!-- 烟台结束 -->
      <div class="line"></div>
      <!-- 加载更多 -->
      <div class="more">加载更多</div>
      </div>
    </div>
    <HelloWorld2/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import HelloWorld2 from '@/components/HelloWorld2.vue'
import Swiper from 'swiper'
export default {
  name: 'HomeView',
  components: {
    HelloWorld,
    HelloWorld2
  },
  //  data() {
  //  return{
  //    content:[true,false,false,false],
  //  }
  // },
  // methods:{
  //   switchItem:function(item){
  //     console.log(item)
  //     for (let i = 0;i < 5;i++) {
  //       if(i==item){
  //          this.$set(this.content,i,true);
  //          } else{
  //            this.$set(this.content,i,false);
  //            }
  //          }
  //      }
  // },
    mounted:function(){
    new Swiper('.swiper-container', {
        loop: true,
        // 如果需要分页器
        autoplay: { // 自动播放
          delay: 2000, // 间隔时间的播放
          disableOnInteraction: false // 是否禁止交互(true: 点击上一页 或者 下一页 按钮，将不再自动播放)
        },
        pagination: {
          el: '.swiper-pagination',
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        }
      })
    }
}
</script>
<style scoped lang="less">
*{margin: 0;padding: 0;}
.main{margin: 50px 0;}
h1{text-align: center;}
.main_gray{text-align: center;color: #c2bfbf;line-height: 50px;}
.main_title{width: 80%;margin: 0 auto;display: flex;flex-direction: row;justify-content:space-between;
div{margin-top: 30px;
  a{border: 1px solid #c2bfbf;border-top-left-radius:30px;border-top-right-radius:30px;border-bottom-right-radius:30px;border-bottom-left-radius:30px;padding: 10px 30px;text-decoration: none;color: black;&.router-link-exact-active,&:hover{background-color: #203f5e;color: #fff;}}
}}
// .swiper-container{width: 100%;img{width: 30%;margin: 1.5%;}display: flex;flex-direction: row;overflow: hidden;}
.lunbo2{width: 100%;border:0px solid pink;padding:0;transition:all 0.3s;margin:30px 0;
.swiper-slide{display: flex;flex-direction: row;width: 100%;overflow:hidden;
div{margin:20px 0;padding:0 1%;a{color: black;text-decoration: none;}p{text-align: center;margin:20px 0;}}}
img{width: 100%;margin: 0;border-radius: 35px;}img:hover{transform: scale(1.1);border-radius: 35px;}}
.main2_three{width: 80%;margin:50px auto;display: flex;flex-direction: row;background-color: #ecf6ff;}
.main2_three_left{width: calc(50% - 40px);img{width: 100%;}padding: 20px;}
.main2_three_right{width: calc(50% - 40px);padding: 20px;
h1{margin: 20px 0;}}
.main2_three_right_p{height: 210px;color: #b3b9bf;font-size: 20px;line-height: 40px;overflow:hidden;text-overflow: ellipsis;margin: 20px 0;}
.main2_three_right_bottom{display: flex;flex-direction: row;justify-content: space-between;color:  #b3b9bf;}
.main2_three_right_bottom_left{display: flex;flex-direction: row;p{border: 1px solid  #b3b9bf;padding: 5px 10px;margin: 15px;line-height: 30px;}}
.main2_three_right_bottom_right {margin: 15px 0;img{width: 30px;}line-height: 40px;display: flex;flex-direction: row;}
.line{width: 80%;height: 2px;background: #c2bfbf;margin: 0 auto;}
.more{width: 80%;margin: 20px auto;background-color: #fff5e5;text-align: center;padding: 10px 0;font-size: 20px;}

</style>